<template>
  <div class="login">
    <div class="content">
      
         <a-input placeholder="Basic usage" v-model:value="user.account">
      <template #prefix>
        <user-outlined type="user" />
      </template>
    </a-input>
    <a-input-password v-model:value="user.password" placeholder="input password" />

        <button @click="login" style="width:100%;height:40px">登录</button>

    </div>
       
  </div>
</template>

<script>
import {ref,reactive,getCurrentInstance} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import {useStore} from 'vuex'
export default {
    setup(){
      var {proxy} =getCurrentInstance()
      const router= useRouter()
      const store =useStore()
        var user=reactive({
          account:'',
          password:''
        })
        
      function testUser(){ //校验填写得信息是否符合要求
          if(!user.account||!user.password) return false
      }


     async function login(){
        if(!testUser) return
        var res = await store.dispatch('user/getUserInfo',user)
        if(res=='err'){
          return
        }
        proxy.$message.success('登录成功！');
        router.replace('/')
      }

        return {
            user,
            login
        }
    }
}
</script>

<style lang="scss" scoped>
.login{
  width: 100vw;
  height: 100vh;
  background-color: #2d3a4b;
    overflow: hidden;
}
.content{
  width:300px;
  margin: 300px auto;
}

</style>